<template>
  <div>
    <div class="banner">
      <el-carousel :interval="5000" arrow="always" height="400px">
        <el-carousel-item v-for="item in banner" :key="item.carousel_id">
          <img :src="'http://101.132.181.9:3000/' + item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 手机区域 -->
    <div class="shouji">
      <h3>手机</h3>
      <div class="item">
        <div class="left">
          <img
            src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
            alt=""
          />
        </div>
        <div class="right">
          <div class="right-list" v-for="item in Mobile" :key="item.product_id">
            <div class="right-img">
              <img
                @click="tiaotiao(item.product_id)"
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}屏</p>
              <p style="color: red">
                {{ item.product_selling_price }}元&ensp;<s
                  style="color: gray; font-size: 20px"
                  >{{ item.product_price }}元</s
                >
              </p>
            </div>
          </div>

          <div class="right-list" @click="tiao">
            <div class="list">
              <p>浏览更多>></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 家电 -->
    <div class="jiadian">
      <div class="jiadan-list">
        <h3>家电</h3>
        <div class="jiadan-list-item">
          <p ref="jd" @mouseover="jdd" class="jd">热门</p>
          <p ref="ds" @mouseover="dsyy">电视影音</p>
        </div>
      </div>
      <div class="item">
        <div class="item-list">
          <div class="left">
            <img
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
              alt=""
            />
          </div>
          <div class="left">
            <img
              src="	http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png"
              alt=""
            />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right" v-if="show">
          <div class="right-item" v-for="item in omeapp" :key="item.product_id">
            <div class="right-item-list">
              <img
                @click="tiaotiao(item.product_id)"
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
            </div>
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p style="color: red">
              {{ item.product_price }}&ensp;<s
                style="color: gray; font-size: 20px"
                >{{ item.product_selling_price }}</s
              >
            </p>
          </div>
          <div class="right-list" @click="tiao">
            <div class="list">
              <p>浏览更多>></p>
            </div>
          </div>
        </div>
        <!-- 电视影音 -->
        <div class="right" v-if="as">
          <div
            class="right-item"
            v-for="item in omeappp"
            :key="item.product_id"
          >
            <div class="right-item-list">
              <img
                @click="tiaotiao(item.product_id)"
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
            </div>
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p style="color: red">
              {{ item.product_price }}&ensp;<s
                style="color: gray; font-size: 20px"
                >{{ item.product_selling_price }}</s
              >
            </p>
          </div>
          <div class="right-list" @click="tiao">
            <div class="list">
              <p>浏览更多>></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 家电 -->
    <div class="jiadian">
      <div class="jiadan-list">
        <h3>配件</h3>
        <div class="jiadan-list-item">
          <p ref="em" @mousemove="em" class="em">热门</p>
          <p ref="bht" @mousemove="bht" class="bht">保护套</p>
          <p ref="cdq" @mousemove="cdq" class="cdq">充电器</p>
        </div>
      </div>
      <div class="item">
        <div class="item-list">
          <div class="left">
            <img
              src="	http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
              alt=""
            />
          </div>
          <div class="left">
            <img
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
              alt=""
            />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right" v-if="showw">
          <div
            class="right-item"
            v-for="item in accessory"
            :key="item.product_id"
          >
            <div class="right-item-list">
              <img
                @click="tiaotiao(item.product_id)"
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
            </div>
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p style="color: red">
              {{ item.product_price }}&ensp;<s
                v-if="item.product_price != item.product_selling_price"
                style="color: gray; font-size: 20px"
                >{{ item.product_selling_price }}</s
              >
            </p>
          </div>
          <div class="right-list" @click="tiao">
            <div class="list">
              <p>浏览更多>></p>
            </div>
          </div>
        </div>
        <!-- 保护套 -->
        <div class="right" v-if="showww">
          <div
            class="right-item"
            v-for="item in accessoryy"
            :key="item.product_id"
          >
            <div class="right-item-list">
              <img
                @click="tiaotiao(item.product_id)"
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
            </div>
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p style="color: red">
              {{ item.product_price }}&ensp;<s
                v-if="item.product_price != item.product_selling_price"
                style="color: gray; font-size: 20px"
                >{{ item.product_selling_price }}</s
              >
            </p>
          </div>
          <div class="right-list" @click="tiao">
            <div class="list">
              <p>浏览更多>></p>
            </div>
          </div>
        </div>
        <!-- 充电器 -->
        <div class="right" v-if="showwww">
          <div
            class="right-item"
            v-for="item in accessoryyy"
            :key="item.product_id"
          >
            <div class="right-item-list">
              <img
                @click="tiaotiao(item.product_id)"
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
            </div>
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p style="color: red">
              {{ item.product_price }}&ensp;<s
                v-if="item.product_price != item.product_selling_price"
                style="color: gray; font-size: 20px"
                >{{ item.product_selling_price }}</s
              >
            </p>
          </div>
          <div class="right-list" @click="tiao">
            <div class="list">
              <p>浏览更多>></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  bannerr,
  getMobileList,
  HomeappList,
  peijianList,
  HomeappListt,
  peijianListt,
} from "@/api/user";
import { getdetailsListt } from "@/api/goods";
export default {
  name: "HomeLayout",
  data() {
    return {
      show: true,
      as: false,
      showw: true,
      showww: false,
      showwww: false,

      //轮播图
      banner: [],
      //手机
      Mobile: [],
      //家电
      omeapp: [],
      // 电视影音
      omeappp: [],
      //配件
      accessory: [],
      accessoryy: [],
      accessoryyy: [],
    };
  },
  created() {
    this.getdata();
    this.getMobile();
    this.Homeapp();
    this.Homeappp();
    this.peijian();
    this.peijiannn();
    this.peijiannnn();
  },
  methods: {
    em() {
      this.$refs.em.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.cdq.style = "color:black;border:none";
      this.$refs.bht.style = "color:black;border:none";
      this.showw = true;
      this.showww = false;
      this.showwww = false;
    },
    bht() {
      this.$refs.bht.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.em.style = "color:black;border:none";
      this.$refs.cdq.style = "color:black;border:none";
      this.showw = false;
      this.showww = true;
      this.showwww = false;
    },
    cdq() {
      this.$refs.cdq.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.bht.style = "color:black;border:none";
      this.$refs.em.style = "color:black;border:none";
      this.showw = false;
      this.showww = false;
      this.showwww = true;
    },
    jdd() {
      this.$refs.jd.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.ds.style = "color:black;border:none";
      this.show = true;
      this.as = false;
    },
    dsyy() {
      this.$refs.ds.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.jd.style = "color:black;border:none";
      this.show = false;
      this.as = true;
    },
    //跳转详情
    async tiaotiao(type) {
      this.$router.push({
        path: "/details",
        query: {
          type:type
        },
      });
    },
    //跳转分类
    tiao(type) {
      this.$router.push({
        path: "/goods",
        query: {
          type: type,
        },
      });
    },
    //配件
    async peijian() {
      let res = await peijianList({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"],
      });
      console.log(res, "配件");
      this.accessory = res.Product;
    },
    async peijiannn() {
      let res = await peijianListt({ categoryName: "保护套" });
      console.log(res.Product, "配件");
      this.accessoryy = res.Product;
    },
    async peijiannnn() {
      let res = await peijianListt({ categoryName: "充电器" });
      console.log(res.Product, "配件");
      this.accessoryyy = res.Product;
    },

    //家电
    async Homeapp() {
      let res = await HomeappList({
        categoryName: ["电视机", "空调", "洗衣机"],
      });

      console.log(res.Product, "家电");
      this.omeapp = res.Product;
    },

    async Homeappp() {
      let res = await HomeappListt({ categoryName: "电视机" });
      console.log(res.Product, "家电");
      this.omeappp = res.Product;
    },
    //手机模块
    async getMobile() {
      let res = await getMobileList({ categoryName: "手机" });
      console.log(res.Product, "手机");
      this.Mobile = res.Product;
    },
    //轮播图
    async getdata() {
      let res = await bannerr();
      //   console.log(res.carousel);
      if (res.code == "001") {
        this.banner = res.carousel;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.jd {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
.em {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

// 家电
.jiadian {
  .jiadan-list {
    display: flex;
    justify-content: space-between;
    .jiadan-list-item {
      display: flex;
      p {
        margin-right: 20px;
      }
    }
  }
  width: 100%;
  height: 770px;
  background-color: #f5f5f5;
  margin-top: 20px;
  h3 {
    margin-left: 100px;
    color: #336aaa;
  }
  .item {
    display: flex;
    width: 80%;
    height: 755px;
    margin-top: 10px;
    margin: auto;
    .right {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;

      .right-list {
        width: 24%;
        height: 49%;

        .list {
          height: 100%;

          text-align: center;
          line-height: 300px;
          font-size: 30px;
          background-color: #ffffff;
        }
      }
      .right-item {
        width: 24%;
        height: 49%;
        text-align: center;
        background-color: #ffffff;
        cursor: pointer;
        transition: all 0.2s linear;
        position: relative;
        &:hover.right-item {
          box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
          transform: translate3d(0, -2px, 0);
        }
        .right-item-list {
          width: 100%;
          height: 77%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item-list {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .left {
        width: 100%;
        height: 45%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
// 手机
.shouji {
  width: 100%;
  height: 700px;
  background-color: #f5f5f5;
  margin-top: 20px;
  h3 {
    margin-left: 100px;
    color: #336aaa;
  }
  .item {
    display: flex;
    width: 80%;
    height: 615px;
    margin-top: 10px;
    margin: auto;

    .left {
      width: 20%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      width: 80%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      .right-list {
        width: 24%;
        height: 49%;
        background-color: #ffffff;
        cursor: pointer;
        transition: all 0.2s linear;
        position: relative;
        &:hover.right-list {
          box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
          transform: translate3d(0, -2px, 0);
        }
        .list {
          text-align: center;
          line-height: 300px;
          font-size: 30px;
        }
        .right-img {
          width: 100%;
          height: 77%;
          background-color: #99a9bf;
          text-align: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.banner {
  width: 90%;
  height: 400px;
  margin: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>